<template>
  <div class="SingleMargin">
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="100px"
            class="flex-start"
          >
            <el-form-item
              v-if="userType == '00'"
              label="所属网点"
              prop="collectType"
            >
              <el-select
                v-model="form.collectType"
                placeholder="请选择所属网点"
                style="width: 275px"
                @change="gb"
              >
                <el-option
                  v-for="item in networkList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="time">
              <el-select
                v-model="form.dateType"
                placeholder="请选择时间"
                style="width: 150px"
                @change="timeechange"
              >
                <el-option
                  v-for="item in timee"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-date-picker
                v-model="form.time"
                style="width: 650px"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="mxDateChange"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="mxClear">重置</el-button>
              <el-button plain icon="el-icon-upload2" @click="exportData"
                >导出</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <t-table
      row-key="id"
      :columns="columns"
      :data="tableData"
      :editable-cell-state="editableCellState"
      :loading="loading"
      bordered
    ></t-table>
    <div class="footer">
      <pagination
        :current-page="form.pageDate.pageNum"
        :page-size="form.pageDate.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { Input, MessagePlugin } from "tdesign-vue";

import {
  getGrossMarginData,
  editGrossMarginData,
  exportGrossMarginData,
} from "@/api/statisticalCenter.js";

export default {
  name: "SingleMargin",
  data() {
    return {
      userType: localStorage.getItem("userType") || null,
      form: {
        collectType: 0,
        dateType: 0,
        pageDate: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      rules: {
        collectType: [
          { required: true, message: "请选择网点名称", trigger: "blur" },
        ],
        time: [{ required: true, message: "请选择日期", trigger: "blur" }],
      },
      timee: [
        { value: 0, label: "扣付日期" },
        { value: 1, label: "会计日期" },
      ],
      // 网点列表
      networkList: [
        { value: 0, label: "网点" },
        { value: 1, label: "承包区" },
        { value: 2, label: "客户" },
      ],
      loading: false,
      tableData: [],
      total: 0,
    };
  },
  computed: {
    columns() {
      return [
        {
          title: "统计日期",
          colKey: "collectDate",
          align: "center",
        },
        {
          title: "承包区名称",
          colKey: "contractAreaName",
          align: "center",
        },
        {
          title: "发件票数",
          colKey: "dispatchParcelCount",
          align: "center",
        },
        {
          title: "充值价格",
          colKey: "sheetTopUpPrice",
          align: "center",
          edit: this.editMethod(editGrossMarginData, this.tableData),
        },
        {
          title: "0.01-1kg",
          colKey: "zeroOne",
          align: "center",
          children: [
            {
              title: "票数",
              colKey: "zeroToOneCount",
              align: "center",
            },
            {
              title: "单价",
              colKey: "zeroToOne",
              align: "center",
              edit: this.editMethod(editGrossMarginData, this.tableData),
            },
          ],
        },
        {
          title: "1.01-3kg",
          colKey: "oneThree",
          align: "center",
          children: [
            {
              title: "票数",
              colKey: "oneToThreeCount",
              align: "center",
            },
            {
              title: "单价",
              colKey: "oneToThree",
              align: "center",
              edit: this.editMethod(editGrossMarginData, this.tableData),
            },
          ],
        },
        {
          title: "3.01-5kg",
          colKey: "threeFive",
          align: "center",
          children: [
            {
              title: "票数",
              colKey: "threeToFiveCount",
              align: "center",
            },
            {
              title: "单价",
              colKey: "threeToFive",
              align: "center",
              edit: this.editMethod(editGrossMarginData, this.tableData),
            },
          ],
        },
        {
          title: "5.01-999kg",
          colKey: "five",
          align: "center",
          children: [
            {
              title: "票数",
              colKey: "overFiveCount",
              align: "center",
            },
            {
              title: "单价",
              colKey: "overFive",
              align: "center",
              edit: this.editMethod(editGrossMarginData, this.tableData),
            },
          ],
        },
        {
          title: "面单收入",
          colKey: "sheetSaleroom",
          align: "center",
        },
        {
          title: "面单成本",
          colKey: "sheetCost",
          align: "center",
        },
        {
          title: "面单结余",
          colKey: "sheetSurplus",
          align: "center",
        },
      ];
    },
  },
  methods: {
    editMethod(url, data) {
      return {
        component: Input,
        props: {
          clearable: true,
          autofocus: true,
        },
        abortEditOnEvent: ["onEnter"],
        onEdited: (context) => {
          url({ ...context.newRowData, ...this.form }).then((res) => {
            if (res.code == 200) {
              data.splice(context.rowIndex, 1, context.newRowData);
              MessagePlugin.success("修改成功！");
              this.search();
            }
          });
        },
        rules: [{ required: true, message: "不能为空" }],
      };
    },
    gb(value) {
      this.form.collectType = value;
    },
    timeechange(val) {
      this.form.dateType = val;
    },
    mxDateChange(value) {
      if (value != null) {
        this.form.startTime = value[0];
        this.form.endTime = value[1];
      }
    },
    search() {
      this.$refs.form.validate((res) => {
        if (res) {
          this.loading = true;
          getGrossMarginData(this.form).then((res) => {
            this.tableData = res.data.list.data;
            this.total = res.data.list.total;
            this.loading = false;
          });
        }
      });
    },
    mxClear() {
      this.$refs.form.resetFields();
      this.form.startTime = "";
      this.form.endTime = "";
      this.tableData = [];
    },
    editableCellState() {
      return true;
    },
    handleSizeChange(size) {
      this.form.pageDate.pageSize = size;
      this.search();
    },
    handleCurrentChange(current) {
      this.form.pageDate.pageNum = current;
      this.search();
    },
    exportData() {
      this.$refs.form.validate((res) => {
        if (res) {
          exportGrossMarginData(this.form).then((res) => {
            const url = window.URL.createObjectURL(new Blob([res]), {
              type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
            });
            const link = document.createElement("a");
            link.href = url;
            link.setAttribute("download", "面单毛利表.xlsx"); // 设置下载的文件名
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.SingleMargin {
  padding: 20px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.flex-bettom {
  display: flex;
  justify-content: space-between;
}

.header {
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
